<template>
  <div style="background-color: var(--color-bg-F6);">
    <!-- 固定头部 -->
    <template v-if="isPc === 1">
      <div class="show-pc">
        <div>
          <PCHeadLayout class="head" />
        </div>
        <div class="content-wrapper">
          <slot />
          <FloatGroup />
        </div>
      </div>
    </template>

    <template v-if="isPc === 2">
      <div class="show-wap">
        <div>
          <PCHeadLayout class="head-wap" />

        </div>
        <div class="content-wrapper-wap">
          <slot />
          <FloatGroup />
        </div>
      </div>
    </template>

  </div>
</template>

<script setup>
import PCHeadLayout from './components/pc/HeadLayout.vue'
import FloatGroup from './components/pc/FloatGroup.vue'
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useStore } from '@/store'
const { themeStore } = useStore()

const isHeadShow = ref(true)
const route = useRoute()

if (route.path === "/login") {
  isHeadShow.value = false
} else {
  isHeadShow.value = true
}

const isPc = ref(0) // 0未知 1pc 2wap

onMounted(() => {
  themeStore.searcShow.activeKey = 0
  themeStore.activeKey = 0

  console.log( themeStore.searcShow.activeKey);
  

  if (window.innerWidth >= 800) {
    isPc.value = 1
  } else {
    isPc.value = 2
  }

  window.addEventListener('resize', () => {
    if (window.innerWidth >= 800) {
      isPc.value = 1
    } else {
      isPc.value = 2
    }
  })
})


</script>

<style lang="less" scoped>
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-bg-F6);
}

/* 新增内容容器样式 */
.content-wrapper {
  padding-top: 3.62vw;
 
  min-height: calc(100vh - 3.62vw);
}


.head-wap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--color-bg-F6);
}


.content-wrapper-wap {
  padding-top: 70px;
  min-height: calc(100vh - 70px);
}
</style>